<template>
    <div class="tabbar-warp">
        <div class="list">
            <div class="item" :class="index == activeIndex ? 'active' : ''" v-for="(item,index) in data" :key="index" @click="routerLink(item,index)">
                <div class="icon">
                    <i class="iconfont" :class="`icon-${index == activeIndex ? item.icon + '1' : item.icon }`"></i>
                </div>
                <span class="text">{{item.text}}</span>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'TabbarWarp',
    props: {
        data: {
            type: Array
        }
    },
    data() {
        return {
            activeIndex:0
        }
    },
    methods: {
        routerLink(e,index) {
            this.activeIndex = index
            if(this.$route.path != e.path) {
                this.$router.push(e.path)
            }
        }
    },
    created() {
        if(this.$route.path == '/') {
            this.activeIndex = 0
        }else if(this.$route.path == '/link') {
            this.activeIndex = 1
        }else {
            this.activeIndex = 2
        }
    }
}
</script>

<style lang="scss" scoped>
@import '../../assets/scss/theme.scss';
.tabbar-warp{
    position: fixed;
    z-index:2;
    bottom:0;
    left:0;
    right:0;
    .list{
        display: flex;
        justify-content: space-between;
        border-top-width:0.0625rem;
        border-top-style: solid;
        @include border_color("border_color1");
        @include background_color("background_color5");
        .item{
            text-align: center;
            padding:0.3125rem 0;
            flex:1;
            @include font_color("font_color6");
            .icon{
                .iconfont{
                    font-size:1.375rem;
                }
            }
            .text{
                font-size:0.875rem;
            }
        }
        .active{
            @include font_color("font_color5");
        }
    }
}
</style>